<template>
  <div class="wrapper">
    <ul class="timeline">
      <li v-for="item in list" :key="item.id">
        <div class="item_title_style">
          <div class="item_title">
            <!-- 头像 -->
            <img
              v-if="showAvator"
              class="item_title_img"
              :src="item[prop.avatar]"
              alt="头像"
              :onerror="defaultImg"
            />
          </div>
          <!-- 名字和部门 -->
          <div class="item_name">
            <span> {{ item[prop.realName] }} </span
            ><span v-if="item[prop.realName] && item[prop.department]">/</span
            ><span> {{ item[prop.department] }}</span>
          </div>
          <div class="item_time">
            <!-- 时间 -->
            <span>{{ item[prop.time] }}</span>
          </div>
        </div>
        <div class="content_box">
          <p class="content_items" v-for="(el, ind) in showContent" :key="ind">
            <span>{{ el.name }}：</span>
            <span>{{ item[el.key] }}</span>
          </p>
        </div>
        <slot name="other" :item="item"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    // 数组数据
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示头像
    showAvator: {
      type: Boolean,
      default: true,
    },
    // 字段映射
    prop: {
      type: Object,
      default: function () {
        return {
          realName: "realName",
          department: "department",
          time: "time", //数组格式 ['start','end']   时间线时间
          avatar: "avatar", //头像链接,             需拼接好apiurl
        };
      },
    },
    showContent: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      defaultImg: `this.src = '${require("@/assets/images/header001.png")}'`,
    };
  },

  created() {
    console.log(this.list, "-----");
  },
};
</script>

<style scoped lang="scss">
// 审批记录统一样式
.wrapper {
  font-size: 14px;
  height: auto;
  // padding: 0 1.5rem 0 6.3rem;
}

/*各个部分样式*/
.timeline {
  height: auto;
  // margin: 10px auto;
  padding-bottom: 1rem;
}

.timeline li {
  position: relative;
  margin: 0px 12px 10px 10px;
  // padding: 4px 15px 15px 0px;
  padding: 15px 12px;
  list-style: none;
  background-color: #f1f7fe;
  width: 100%;
  border-radius: 6px;
}

.item_title_style {
  overflow: hidden;

  .item_name {
    float: left;
    line-height: 40px;
  }

  .item_time {
    font-size: 12px;
    float: right;
    color: #606266 !important;
    line-height: 40px;
    margin-right: 15px;
  }
}

.timeline li .item_title {
  float: left;
  // display: inline-block;
  align-items: center;

  .item_title_img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 12px;
    // margin-right: 16px;
  }
}

.timeline li .item_title:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: -30px;
  margin-left: 0px;
  top: 26px;
  background: #fcfeff;
  border: 3px solid #008dff;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-size: 10px 10px;
  z-index: 1;
  background-color: #ffffff;

  /* background-image:url('../../../assets/images/success.png'); */
  /* 背景图垂直、水平均居中 */
  /* background-position: center center; */
  /* 背景图不平铺 */
  /* background-repeat: no-repeat; */
  /* 让背景图基于容器大小伸缩 */
  /* background-size: cover; */
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}

.timeline li .item_title:after {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  border-left: 1px dashed #dcdee5;
  height: 80%;
  left: -21px;
  top: 48px;
  margin-left: -2px;
}

.timeline li:last-child .item_title:after {
  content: "";
  display: none;
}

.timeline li p {
  height: auto;
  color: rgba(#000000, 0.9);
  // padding: 4px 20px 4px 7px;
}

.timeline li .time {
  position: absolute;
  left: -120px;
  top: 26px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #606266;
  line-height: 16px;
}

.content_box {
  display: flex;
  flex-direction: column;
  width: 80%;
}

.content_items {
  padding-top: 12px;
  // background-color: none;
  display: inline-block;
  // padding-right: 30px;
  color: #606266 !important;
}
</style>
